<template>
  <div class="w-full">
    <div class="page-head">
      <div>
        <slot />
      </div>
      <div>
        <slot name="right" />
      </div>
    </div>
    <div v-if="slots.add || btnName" class="page-add" @click.stop="emit('add')">
      <slot v-if="slots.add" name="add" />
      <a-button v-else type="primary" class="w-full b-rd-15px">
        <PlusOutlined />
        {{ btnName }}
      </a-button>
    </div>
  </div>
</template>

<script setup>
/**
 * --------------------------------------------------------------------
 * <<伯礼后台管理系统>>
 * ----------------------------------------------------------------------
 * Licensed 未经许可不能去掉去掉boli相关版权信息
 * ----------------------------------------------------------------------
 * Author: HuaBoli E-mail: <haboli1314@163.com>
 * ----------------------------------------------------------------------
 */
import { PlusOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'PageHead',
})

const { btnName } = defineProps({
  btnName: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['add'])

const slots = useSlots()
</script>

<style lang="less" scoped>
.page-head {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  background: #fff;

  & > div {
    height: 100%;
  }
}

.page-add {
  position: fixed;
  top: 8px;
  right: 16px;
  width: 120px;
  height: 40px;
}
</style>
